<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<head lang="en">
	<meta http-equiv="content-type" content="text/html;charset=utf-8">
	<title>Responsive Paradise Hotel site template - Template Documentation Template</title>
	<!-- Framework CSS -->
	<link rel="stylesheet" href="assets/blueprint-css/screen.css" type="text/css" media="screen, projection">
	<link rel="stylesheet" href="assets/blueprint-css/print.css" type="text/css" media="print">
	<!--[if lt IE 8]><link rel="stylesheet" href="assets/blueprint-css/ie.css" type="text/css" media="screen, projection"><![endif]-->
	<link rel="stylesheet" href="assets/blueprint-css/plugins/fancy-type/screen.css" type="text/css" media="screen, projection">
	<style type="text/css" media="screen">
		p, table, hr, .box { margin-bottom:25px; }
		.box p { margin-bottom:10px; }
		pre,code { font-family:"Consolas", Courier New, Courier, monospace; padding:15px; background:#f7f7f7; margin:0px 0px 18px; border:1px solid #e5e5e5; line-height:18px; color:#000 }
code { padding:0px 3px; background-image:none; background:#f5f5f5; border:none }
pre { white-space:pre-wrap; white-space:-moz-pre-wrap; white-space:-pre-wrap; white-space:-o-pre-wrap; word-wrap:break-word }
	</style>
</head>


<body>
	<div class="container">
	
		<h3 class="center alt">&ldquo;Responsive Paradise Hotel site template&rdquo; Documentation by &ldquo;Ansonika&rdquo; v1.0</h3>
		
		<hr>
		
		<h1 class="center">&ldquo;Responsive Paradise Hotel&rdquo;</h1>
		
		<div class="borderTop">
			<div class="span-6 colborder info prepend-1">
				<p class="prepend-top">
					<strong>
					Created: 02/03/2012<br>
					By: Ansonika<br>
					Email: <a href="mailto:info@ansonika.com">info@ansonika.com</a>
                    Website/support: <a href="http://www.ansonika.com">www.ansonika.com</a>
				  </strong>
			  </p>
		  </div><!-- end div .span-6 -->		
	
			<div class="span-12 last">
				<p class="prepend-top append-0">Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. If you are happy with the theme, please <strong><a href="http://themeforest.net/user/Ansonika">TAKE A MOMENT TO RATE IT</a></strong> on the ThemeForest website.
Thanks so much!</p>
			</div>
		</div><!-- end div .borderTop -->
		
		<hr>
		
		<h2 id="toc" class="alt">Table of Contents</h2>
		<ol class="alpha">
			<li><a href="#htmlStructure">HTML Structure</a></li>
			<li><a href="#cssFiles">CSS Files and Structure</a></li>
<li><a href="#modify">Customize the template and video content</a></li>
<li><a href="#php">PHP newsltetter form and sign up form</a></li>
			<li><a href="#javascript">JavaScript</a></li>
			<li><a href="#psdFiles">PSD Files</a></li>
			<li><a href="#credits">Sources and Credits</a></li>
		</ol>
	  <hr>
        
        
  <h3 id="htmlStructure"><strong>A) HTML Structure</strong> - <a href="#toc">top</a></h3>
	  <p> This theme has a fixed centered layout 960px. It's based on Skeleton framework grid. It's RESPONSIVE!!<br />
	  </p>
<hr>

		<h3 id="cssFiles"><strong>B) CSS Files Structure and basic modfication</strong> - <a href="#toc">top</a>	  </h3>
	  <p>The css files are inside the css folder.</p>
	  <ol>
			<li><strong>base.css</strong>: Basic styles of Skeleton (reset, heading, button, forms, etc..)</li>
			<li><strong>skeleton.css</strong>: The grid</li>
			<li><strong>layout.css</strong>: all layout styles (mediaqueries included)</li>
			<li><strong>menu.css</strong> (superfish menu)</li>
			<li><strong>flexislider.css</strong> (Homepage slider)</li>
			<li><strong>supersized.css</strong> (Fullscreen Gallery)</li>
	  </ol>
<p> To modify colors, typografy, button style ecc....find the realtive commen line in base.css. Below how the file is organized:</p>
BASE.CSS STRUCTURE:<br>


#Reset &amp; Basics<br>
#Basic Styles<br>
#Site Styles<br>
#Typography<br>
#Links<br>
#Lists<br>
#Images<br>
#Buttons<br>
#Tabs<br>
#Forms<br>
#Misc */
<p>&nbsp;</p>
<p><strong>Change the logo<br>
  </strong>To change the logo, simply replace with your own taking care there are two sizes of logo...one smaller for mobile devices.<br>
  <strong>Logo 1:</strong> max width 190px<br>
  <strong>Logo 2:</strong> max width 142px </p>
<p><strong>Change city weather condition<br>
  Open functions.js inside the js folder and  specify the ZIP/location code and units (f or c).</strong> For these locations, you'll need to determine a special location code that uses the format CCRR0000, where the CC represents the country code, the RR represents the region code (just XX for most countries), and the 0000 represents the station ID. For example, the location code for Paris, France is FRXX0076.  The easiest way to find an international location code is by going to  <a href="http://www.weather.com/">Weather.com</a>, searching for the location, going to its local weather page  and noting the URL. Suppose you searched for Madrid, Spain. The URL in  your browser for the local weather page looks like this: http://www.weather.com/weather/today/SPXX0050.</p>
<p><strong>Change the captions and the background images for the fullscreen gallery:</strong> open bg_images.js inside the js folder. Modify the lines of code below as you need.</p>
<pre>slides 					:  	[		//Slideshow Images<br>{image : 'img/1.jpg', 
title : 'Write your caption here&lt;span&gt;Donec ante justo, ullamcorper laoreet euismod eu, fringilla &lt;/span&gt;'}, <br>{image : 'img/2.jpg', 
title : 'Write your caption here&lt;span&gt;Donec ante justo, ullamcorper laoreet euismod eu, fringilla &lt;/span&gt;'}<br>												]<br>												<br>				}); <br>		    });</pre>

<p><strong>ATTENTION!!: LAST IMAGE HAS NO COMMA</strong></p>
<p><strong>Change the Vimeo video</strong><br>
For Vimeo find the line &lt;iframe src=&quot;http://player.vimeo.com/video/<strong>12396583</strong>?title=0&amp;amp;byline=0&amp;amp;portrait=0&amp;amp;color=ffffff&amp;amp;autoplay=1&quot; width=&quot;465&quot; height=&quot;270&quot; &gt;&lt;/iframe&gt; .....change the code marked in bold. </p>

<p><strong>Change the button labelling</strong><br> 
      All the buttons are fully editable. Simply replace the text...you can use text long as you need.</p>
      <pre>&lt;a href=&quot;#&quot; class=&quot;button&quot;&gt;Read more&lt;/a&gt;</pre>
      <strong>Change the map location <br>
      </strong>Use google map to find the proper latitude and longitude <strong>, </strong>then change the code narked in bold.<strong><br>
      </strong>
      <pre>&lt;div class=&quot;map_canvas add-bottom&quot; data-lat=&quot;<strong>39.621557</strong>&quot; data-lng=&quot;<strong>0.370233</strong>&quot; 
data-address=&quot;Palma, Spain&quot; data-zoom=&quot;10&quot; data-maptitle=&quot;Paradise Hotel&quot; style=&quot;height:275px;width:100%;&quot;&gt;<br>	&lt;/div&gt;&lt;!-- end map--&gt;</pre>
      <p><strong>Installing the rate room widget<br>
      </strong>The rate widget write the vote on a txt file (ratings.data.txt). Once uploade on your host, be sure to set the file permission of this to 777. I f you wont to add a widget more simply copy an existing an give another id<strong>.</strong></p>
      <p><strong>THE GRID</strong></p>
      
      <h4>Columns on a Full Width Page (16 Columns)</h4>
      <strong>1/2 Columns (8 cols)</strong>
<table border="0" cellpadding="0" cellspacing="0">
        <tbody>
              <tr>
                <td><div>
                  <div>&lt;div class="container"&gt;</div>
                  <div>    &lt;div class="eight columns"&gt;Half Width&lt;/div&gt;</div>
                  <div>    &lt;div class="eight columns"&gt;Half Width&lt;/div&gt;</div>
                  <div>&lt;/div&gt;</div>
                </div></td>
              </tr>
    </tbody>
          </table>

      <strong>1/4 Columns (4 cols)</strong>
<table border="0" cellpadding="0" cellspacing="0">
        <tbody>
              <tr>
                <td><div>
                  <div>&lt;div class="container"&gt;</div>
                  <div>    &lt;div class="four columns"&gt;Quarter Width&lt;/div&gt;</div>
                  <div>    &lt;div class="four columns"&gt;Quarter Width&lt;/div&gt;</div>
                  <div>    &lt;div class="four columns"&gt;Quarter Width&lt;/div&gt;</div>
                  <div>    &lt;div class="four columns"&gt;Quarter Width&lt;/div&gt;</div>
                  <div>&lt;/div&gt;</div>
                </div></td>
              </tr>
    </tbody>
          </table>

      <strong>3/4 Columns (12 &amp; 4 cols)</strong>
<table border="0" cellpadding="0" cellspacing="0">
        <tbody>
              <tr>
                <td><div>
                  <div>&lt;div class="container"&gt;</div>
                  <div>    &lt;div class="four columns"&gt;Quarter Width&lt;/div&gt;</div>
                  <div>    &lt;div class="twelve columns"&gt;3/4 Width&lt;/div&gt;</div>
                  <div>&lt;/div&gt;</div>
                </div></td>
              </tr>
    </tbody>
          </table>

      <strong>1/3 &amp; 2/3 Columns</strong>
      <p>Thirds use a special syntax for full-width</p>
     
          <table border="0" cellpadding="0" cellspacing="0">
            <tbody>
              <tr>
                <td><div>
                  <div>&lt;div class="container"&gt;</div>
                  <div>    &lt;div class="one-third column"&gt;1/3 Width&lt;/div&gt;</div>
                  <div>    &lt;div class="two-thirds column"&gt;2/3 Width&lt;/div&gt;</div>
                  <div>&lt;/div&gt;</div>
                </div></td>
              </tr>
            </tbody>
          </table>
        
      <strong>Nested Columns</strong>
      <p>If you nest columns (use columns within columns), you'll need to use the  						.alpha and .omega classes 						on your first and last columns, respectively, to account for the margins.</p>
   

          <table border="0" cellpadding="0" cellspacing="0">
            <tbody>
              <tr>
                <td><div>
                  <div>&lt;div class="container"&gt;</div>
                  <div>    &lt;div class="eleven columns"&gt;</div>
                  <div>        &lt;div class="five columns alpha"&gt;First&lt;/div&gt;</div>
                  <div>        &lt;div class="six columns omega"&gt;Last&lt;/div&gt;</div>
                  <div>    &lt;/div&gt;</div>
                  <div>&lt;/div&gt;</div>
                </div></td>
              </tr>
            </tbody>
          </table>
     
      <strong>Offsets</strong>
      <p>To leave a column gap between columns, use the .offset-by-X class.  Valid values for X are  						'one' through 'fifteen'</p>


          <table border="0" cellpadding="0" cellspacing="0">
            <tbody>
              <tr>
                <td><div>
                  <div>&lt;div class="container"&gt;</div>
                  <div>    &lt;div class="eleven columns"&gt;&lt;/div&gt;</div>
                  <div>    &lt;div class="four columns offset-by-one"&gt;&lt;/div&gt;</div>
                  <div>&lt;/div&gt;</div>
                </div></td>
              </tr>
            </tbody>
          </table>

      <strong>To Clear Rows</strong>
      <ul>
        <li>Add the .clear-grid class to the first item in each row</li>
        <li>OR wrap each row in a .row div</li>
        <li>OR add a &lt;br class="clear" /&gt; after the last item in each row</li>
      </ul>
      <p>  
        <strong>
        For a full demonstration of the responsive grid, visit 
        the <a href="http://getskeleton.com/#grid">Skeleton Grid Demo</a>
          
        <br>
        <br>
        </strong>
      </p>
      <hr>
<br>
      <h3 id="php"><strong>D) PHP files: Room availability request and contact form</strong> - <a href="#php">top</a></h3>
      <p><strong>Room availability request: if you wont to use it be sure to use rooms.php or rooms_2.php.</strong> An availability email wil be send to the owner of the hotel/site, or account email you desire.Replace info@ansonika.com with your email. Below the code:<strong><br>
      </strong><br>
        <img src="assets/images/mail.png" alt="" width="467" height="308" style="border:1px solid #ccc;">
      </p>
      </p>
      <p><strong>Contact form<br>
        </strong>It's the same logic and script of check room availability, to use it be sure to use contact.php and not the html version.<strong><br>
</strong></p>
<hr>
<h3 id="javascript"><strong>E) JavaScript</strong> - <a href="#toc">top</a></h3>
		
	  <p>This theme use These Javascript.</p>
		<p><img src="assets/images/js.jpg" width="249" height="256" style="border:1px solid #ccc;"></p>
		<p><strong>Plug_ins.js:</strong> JQUERY plugins( Moderniz, Prettyphoto, Flexislider, MobileMenu, SuperfishMenu, Weather, Tooltip).<br>
		  <strong>Plug_ins_2.js:</strong> JQUERY plugins( Moderniz, MobileMenu, SuperfishMenu, ). USED ONLY IN THE FULLSCREEN GALLERY PAGE AND HOME FULLSCREEN!!<br>
		  <br>
	  </p>
	  <hr>
		
	  <h3 id="psdFiles"><strong>F) PSD Files</strong> - <a href="#toc">top</a></h3>
		
		<p>Inlcuded to layered and grouped psd file.<br>
          <br>
      <img src="folder_1.jpg" alt="" width="436" height="261" style="border:1px solid #ccc;"></p>
<p>&nbsp;</p>
<p><strong>Editing and exporting<br>
        </strong><br>
        <img src="assets/images/layers.jpg" alt="" width="218" height="211"> </p>
<p>All the psd files  have layers clearly grouped, starting from the background and then follow the order of the structure of the page. To edit an element (text or image) browse the layers folder or use the right click mouse option ( with the Move tool active <img src="assets/images/move.jpg" alt="" width="26" height="23"> ) over the element, to select it.  </p>
<hr>
		
		<h3 id="credits"><strong>G ) Sources and Credits</strong> - <a href="#toc">top</a></h3>
		
	  <p>I've used the following images, icons or other files as listed.
		
		
	  <ul>
            <li><a href="http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/">Prettyphoto</a></li>
        <li><a href="http://bassistance.de/jquery-plugins/jquery-plugin-validation/">Jquery validation form</a></li>
        <li><a href="http://www.buildinternet.com/project/supersized/">Supersized fullscreen</a></li>
        <li><a href="http://www.onextrapixel.com/2011/08/22/adding-weather-to-your-site-with-jquery-and-yql/">Jquery weather</a></li>
        <li><a href="http://flex.madebymufffin.com/">Flexislider</a></li>
        <li><a href="http://gsgd.co.uk/sandbox/jquery/easing/">Jquery easing</a></li>
        <li><a href="http://www.modernizr.com/">Moderniz</a></li>
        <li><a href="http://users.tpg.com.au/j_birch/plugins/superfish/">Superfish</a></li>
        <li><a href="http://flowplayer.org/tools/tooltip/index.html">Calendar and expose effect</a></li>
        <li><a href="http://vadikom.com/demos/poshytip/">Poshytip</a></li>
        <li><a href="http://www.getskeleton.com/">Skeleton Grid</a></li>
	  </ul>
		
<hr>
		
		<p><strong><br>
	    <img src="assets/images/avatar.jpg" width="80" height="80"><br>
		  <br>
	    Once again, thank you so much for purchasing this theme and please take a moment to rate it.</strong><br> 
		  <strong>For support, please attach snapshots and site url and any other kind of information so I can provide a full feedback.</strong><br>
The emails are checked one time a day, Monday to Friday. You will receive an answer within 24-48 hours (working days) GMT1.<br/>
	  </p>
      <p class="text_medium">Please, send an email to <a href="mailto:info@ansonika.com">info@ansonika.com</a> with subject <strong>[ThemeForest Support]  Template name</strong></p>
<p class="append-bottom alt large"><strong>Ansonika</strong></p>
		<p><a href="#toc">Go To Table of Contents</a></p>
		
		<hr class="space">
	</div><!-- end div .container -->
</body>
</html>